import type React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
import { FC } from 'react';

interface UserListFormProp {
  handleFormSubmit: (data: { username: string; phone: string }) => void;
  handleFormChange: (data: { username: string; phone: string }) => void;
  onFinish: (data: { username: string; phone: string }) => void;
}
export const test: React.FC<UserListFormProp> = (props) => <div>{props}</div>;

export default function UserListForm(props: UserListFormProp) {
  const onFinish = (values: any) => {
    console.log('Success:', values);
    props.handleFormSubmit(values);
    props.onFinish(values);
  };
  const onValuesChange = (changedValues, allValues) => {
    props.handleFormChange(allValues);
    console.log(changedValues, allValues);
  };
  return (
    <div>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ username: '', phone: '' }}
        layout="inline"
        onFinish={onFinish}
        onValuesChange={onValuesChange}
        autoComplete="off"
      >
        <Form.Item label="用户名" name="userName">
          <Input />
        </Form.Item>

        <Form.Item label="手机号" name="phone">
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 14, span: 16 }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
